import React, { Component } from "react";
import { Modal, Text, View, Button, TextInput, ToastAndroid } from "react-native";
import { sendRefundMessage, refundTicket } from "../api"

let interval

export default class ModalRefund extends Component {
    constructor(props) {
        super(props)
        this.state = {
            verifyCode: "",
            tickid: "",
            count: 0
        }
    }
    sendRefundMessage = async () => {
        this.setState({
            count: 60
        })
        interval = setInterval(() => {
            if (this.state.count > 0) {
                this.setState({
                    count: this.state.count - 1
                })
            }
            else {
                this.setState({
                    count: 0
                })
                clearInterval(interval)
            }
        }, 1000)
        return await sendRefundMessage(this.props.code)
    }
    refundTicket = async () => {
        return await refundTicket({ verifyCode: this.state.verifyCode, ticketid: this.state.tickid })
    }
    render() {
        return (
            <Modal
                animationType="slide"
                transparent={false}
                visible={this.props.show}
                onRequestClose={() => {
                    this.props.close()
                }}
            >
                <View style={{ marginTop: 22 }}>
                    <View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
                        <View style={{ flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <Text>验证码</Text>
                            <TextInput
                                style={{
                                    flex: 1,
                                    borderColor: 'gray',
                                    borderBottomWidth: 1
                                }}
                                onChangeText={(text) => this.setState({ verifyCode: text })}
                                value={this.state.verifyCode}>
                            </TextInput>
                            <Button disabled={this.state.count > 0}
                                onPress={() => {
                                    this.sendRefundMessage().then(res => {
                                        ToastAndroid.show(res.message, ToastAndroid.SHORT);
                                        this.setState({
                                            tickid: res.id
                                        })
                                    }).catch(e => {
                                        ToastAndroid.show(e.message, ToastAndroid.SHORT);
                                    })
                                }}
                                title={this.state.count > 0 ? this.state.count + "s" : "发送验证码"}
                            />
                        </View >
                        <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <View style={{ flex: 1 }}>
                                <Button
                                    onPress={() => {
                                        this.refundTicket().then(() => {
                                            this.props.close()
                                        })
                                    }}
                                    title="确认"
                                />
                            </View>
                            <View style={{ flex: 1 }}>
                                <Button
                                    color="green"
                                    onPress={() => this.props.close()}
                                    title="关闭"
                                />
                            </View>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}